<template>
  <div>
    <div id="down">
      <div class="person_center">个人中心 》下载中心</div>
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="图片" name="first">
          <div class="pic">
            <ul class="pic_ul">
              <li class="pic_li" v-for="(item,index) of currentPageData" :key="index" v-show="istrue">
                <div
                  @click="tankuang(index)"
                  style="display:flex;flex-direction:column;justify-content:center"
                >
                  <img
                    :src="loadown+item.filePath"
                    style="width:250px;height:200px;object-fit:contain;object-position: top;"
                    alt
                  />
                  <p class="name">{{item.fileName}}</p>
                </div>
              </li>
            </ul>
          </div>
        </el-tab-pane>
        <el-tab-pane label="视频" name="second">
          <div class="pic">
            <ul class="pic_ul">
              <li
                class="pic_li"
                v-for="(item,index) of currentPageData"
                :key="index"
                v-show="isfalse"
              >
                <div @click="tankuang2(index)">
                  <video style="width:250px;height:145px;" :src="loadown+item.filePath"></video>
                  <p class="name">{{item.fileName}}</p>
                </div>
              </li>
            </ul>
          </div>
        </el-tab-pane>
        <el-tab-pane label="文档" name="third">
          <div class="wengdang">
            <ul class="wengdang_ul">
              <li
                class="wengdang_li"
                @click="tankuang3(index)"
                v-for="(item,index) of currentPageData"
                :key="index"
              >
                <p>{{item.fileName}}</p>
                <span v-show="isfalse">{{item.createTime}}</span>
              </li>
            </ul>
          </div>
        </el-tab-pane>
      </el-tabs>
      <div class="tankuang_bg">
        <el-dialog
          :visible.sync="dialogTableVisible"
          :fullscreen="true"
          :modal="false"
          :center="true"
          @close="closeDialog"
          v-if="xiabiao!='frist'"
        >
          <div class="content_k">
            <p class="tankuang_name">{{currentPageData[xiabiao].filePath}}</p>
            <div class="content_img"></div>
            <div class="content_btn" @click="close()"></div>
          </div>
        </el-dialog>
      </div>

      <div id="page">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :pager-count="5"
          :page-size="pageSize"
          layout="prev, pager, next"
          :total="this.totalPage"
        ></el-pagination>
      </div>
    </div>

    <foot2 class="dibu"></foot2>
  </div>
</template>
<script>
import foot2 from "../../components/foot2";

export default {
  data() {
    return {
      xiabiao: "frist",
      dialogTableVisible: false,
      dialogFormVisible: false,
      activeName: "first",
      choose: "",
      productList: [{}], //所有数据
      totalPage: 1, // 统共页数，默认为1
      currentPage: 1, //当前页数 ，默认为1
      pageSize: 8, // 每页显示数量
      currentPageData: [],
      vid: "vid",
      img: "img",
      file: "file",
      sort: "img",
      istrue: true,
      isfalse: false,
    };
  },
  components: {
    foot2: foot2,
  },
  created() {
    this.setCurrentPageData();
    this.getData();
  },
  methods: {
    closeDialog() {
      this.xiabiao = 0;
    },
    close() {
      this.dialogTableVisible = false;
    },
    tankuang(index) {
      this.dialogTableVisible = true;
      this.xiabiao = index;
    },
    tankuang2(index) {
      this.dialogTableVisible = true;
      this.xiabiao = index;
    },
    tankuang3(index) {
      this.dialogTableVisible = true;
      this.xiabiao = index;
    },
    //切换导航
    handleClick(tab, event) {
      this.sort = tab.index;
      if (tab.name === "first") {
        this.istrue = true;
        this.isfalse = false;
      } else if (tab.name === "second") {
        this.istrue = false;
        this.isfalse = true;
      }
    },
    setCurrentPageData() {
      if (this.sort === "0") {
        this.sort = this.img;
        this.getData();
      } else if (this.sort === "1") {
        this.sort = this.vid;
        this.getData();
      } else if (this.sort === "2") {
        this.sort = this.file;
        this.getData();
      }
    },
    getData() {
      this.$api
        .get(
          `${this.zs}/download/img/page?status=${this.sort}&pageNumber=${this.currentPage}&pageSize=${this.pageSize}`
        )
        .then((res) => {
          // 计算一共有几页
          this.totalPage = res.data.data.totalPage;
          this.currentPageData = res.data.data.list;
        });
    },
    //分页
    handleCurrentChange(val) {
      if (val != this.currentPage) {
        this.currentPage = val;
      }
      if (this.sort == "1") {
        this.sort = this.img;
      } else if (this.sort == "2") {
        this.sort = this.vid;
      } else if (this.sort == "3") {
        this.sort = this.file;
      }
      // this.page = val;
      this.setCurrentPageData(
        `${this.zs}/download/img/page?status=${this.sort}&pageNumber=${this.currentPage}&pageSize=${this.pageSize}`
      );
    },
  },
  watch: {
    sort() {
      this.currentPage = 1;
      this.setCurrentPageData();
    },
  },
};
</script>
<style scoped>
li {
  list-style: none;
}

ul,
li,
p {
  padding: 0px;
  margin: 0px;
}

#down {
  width: 1200px;
  margin: auto;
  padding-top: 38px;
}

.person_center {
  margin-bottom: 63px;
}

#down .el-tabs__item {
  font-size: 24px;
}

#down >>> .el-tabs--card > .el-tabs__header .el-tabs__nav {
  border-bottom: 1px solid #bcccfa;
}

#down >>> .el-tabs__item.is-active {
  background: #bcccfa;
  color: #333333;
}

#down >>> .el-tabs__header {
  padding: 0;
  position: relative;
  margin: 0 0 0px;
}

#down >>> .shiping_ul,
#down >>> .pic_ul {
  margin-bottom: 65px;
  margin-top: 110px;
}

#down >>> .wengdang_ul {
  margin-bottom: 65px;
}

#down >>> .shiping_li,
#down >>> .pic_li {
  position: relative;
}

#down >>> .el-dialog {
  -webkit-box-shadow: none;
  box-shadow: none;
  background: none;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#down >>> .el-dialog .tankuang_name {
  margin-bottom: 20px;
}

#down >>> .el-dialog__wrapper {
  background: white;
}

.content_k {
  /* border: 1px solid red; */
  /* width: 80%;
        height: 845px; */
  display: flex;
  flex-direction: column;
  margin: auto;
  text-align: center;

  justify-content: space-evenly;
}

.content_img,
.countent_btn {
  text-align: center;
  margin-bottom: 60px;
}

.loadown {
  width: 250px;
  height: 50px;
  background: darkblue;
  color: white;
  font-size: 20px;
  line-height: 50px;
  text-align: center;
  display: inline-block;
  border-radius: 5px;
  border-radius: 3px;
}

.name,
.name p {
  padding: 20px 0 30px;
  box-sizing: border-box;
  text-align: center;
}

.shiping_ul,
.pic_ul {
  display: flex;
  max-width: 1200px;
  flex-wrap: wrap;
  justify-content: space-between;
}

.sp_anniu {
  position: absolute;
  top: 0px;
  left: 0px;
  margin-top: 32px;
  margin-left: 90px;
}

.wengdang_li {
  display: flex;
  color: #333333;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 30px 60px 12px;
  border-bottom: 1px solid #b2b2b2;
}

.load_pic {
  width: 350px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-repeat: no-repeat;
  background-size: contain;
  /* background-position: center; */
}

#page {
  text-align: center;
  margin-bottom: 85px;
}

#page >>> .el-dialog {
  width: 100%;
  height: 100%;
  -webkit-box-shadow: none;
  box-shadow: none;
}

#page >>> .el-dialog__wrapper {
  background: rgba(225, 225, 225, 0.05);
}

#page >>> .el-pager li {
  border: 1px solid gray;
  margin-right: 20px;
  min-width: 30px;
  height: 30px;
  border-radius: 2px;
}

#page >>> .el-pager li.active {
  color: white;
  cursor: default;
  background: rgb(78, 105, 161);
}

#page >>> .el-icon-arrow-right::before,
#page >>> .el-icon-arrow-left::before {
  content: "";
}

#page >>> .el-pagination .btn-next,
#page >>> .el-pagination .btn-prev {
  height: 40px;
  background: url("../../assets/image/fenye_right.png") no-repeat;
  background-size: auto 30px;
}

#page >>> .el-pagination .btn-prev {
  background: url("../../assets/image/fenye_left.png") no-repeat;
  background-size: auto 30px;
}
</style>
